<template>
  <div class="calculate mt32">
    <div class="cal-header">
      <div class="c-h-title">温馨提示</div>
      <div
        class="c-h-desc"
      >五险一金计算器只提供五险一金的计算结果，不涉及残疾人保险金、重大疾病补充医疗保险、补充养老保险。实际参保金额由不同城市社保局提供的最终办理情况决定。</div>
    </div>
    <div class="cal-header-form">
      <Form :model="formItem" :label-width="90" ref="formValidate">
        <div class="form-item-row">
          <FormItem label="参保城市" class="form-item">
            <Input v-model="formItem.name" placeholder="简拼/全拼/汉字" class="form-input"></Input>
          </FormItem>
          <FormItem label="社保方案" class="form-item">
            <Select v-model="formItem.select" class="form-input">
              <Option value="北京农村">北京农村-工伤0.4%</Option>
              <Option value="北京城镇">北京城镇-工伤0.4%</Option>
 
            </Select>
          </FormItem>
          <FormItem label="社保基数">
            <Input  placeholder="请输入" class="form-input"></Input>
            <Checkbox label class="ml30">最低基数</Checkbox>
          </FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label class="form-item">
            <Input placeholder class="form-input hide"></Input>
          </FormItem>
          <FormItem label="公积金方案" class="form-item">
            <Select v-model="formItem.select" class="form-input">
              <Option value="5%">5%</Option>
              <Option value="6%">6%</Option>
              <Option value="7%">7%</Option>
              <Option value="8%">8%</Option>
              <Option value="9%">9%</Option>
              <Option value="10%">10%</Option>
              <Option value="11%">11%</Option>
              <Option value="12%">12%</Option>
            </Select>
          </FormItem>
          <FormItem label="社保基数">
            <Input placeholder="请输入"  class="form-input"></Input>
            <Checkbox label class="ml30" disabled>最低基数</Checkbox>
          </FormItem>
        </div>
      </Form>
      <div class="btn-wrap">
        <Button class="save-btn-green">计算</Button>
      </div>
    </div>

    <div class="long-bar-btns flex-end">
      <Button class="pierced">导出明细</Button>
    </div>
    <div class="result-wrap">
      <div class="panel">
        <div class="delete">
          <Icon type="ios-trash-outline" size="20" class="icon" />
        </div>

        <div class="panel-top">
          <div class="top-item nopadding">
            <span class="t-i-title">参保城市：</span>
            <div class="t-i-detail">深圳</div>
          </div>
          <div class="top-item two">
            <span class="t-i-title">社保方案：</span>
            <div class="t-i-detail">深户一档-工伤0.28%，失业1%</div>
          </div>
          <div class="top-item">
            <span class="t-i-title">公积金方案：</span>
            <div class="t-i-detail">6%</div>
          </div>
          <div class="top-item">
            <span class="t-i-title">参保人数：</span>
            <div class="t-i-detail">
              <InputNumber v-model="numnber"></InputNumber>
            </div>
          </div>
        </div>

        <div class="panel-middle">
          <div class="sub-wrap">
            <div class="sub-item">
              <div class="h">社保合计（元）</div>
              <div class="by">
                <div class="child-item">
                  <div class="k">公司</div>
                  <div class="v">629.88</div>
                </div>
                <div class="child-item">
                  <div class="k">个人</div>
                  <div class="v">629.88</div>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="h">公积金合计（元）</div>
              <div class="by">
                <div class="child-item">
                  <div class="k">公司</div>
                  <div class="v">629.88</div>
                </div>
                <div class="child-item">
                  <div class="k">个人</div>
                  <div class="v">629.88</div>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="h">其他（元）</div>
              <div class="by">
                <div class="child-item">
                  <div class="k">公司</div>
                  <div class="v">629.88</div>
                </div>
                <div class="child-item">
                  <div class="k">个人</div>
                  <div class="v">629.88</div>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="h">总计（元）</div>
              <div class="by">
                <div class="sum">1,188.18</div>
              </div>
            </div>
          </div>
        </div>

        <div class="toggle-section">
          <div class="table-wrap">
            <Table width="100%" :columns="columns" :data="data4"></Table>
          </div>
          <div class="toggle-btns flex-center">
            展开明细
            <Icon type="ios-arrow-down" size="18" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      numnber: 1,
      formItem: {
        select: "",
        input: "",
        name: "北京"
      },
      columns: [
        {
          title: " ",
          key: "name"
        },
        {
          title: "医疗",
          key: "age"
        },
        {
          title: "失业",
          key: "province"
        },
        {
          title: "工伤",
          key: "city"
        },
        {
          title: "生育",
          key: "city"
        },
        {
          title: "补充（大病）医疗",
          key: "city"
        },
        {
          title: "补充养老",
          key: "city"
        },
        {
          title: "养老",
          key: "city"
        },
        {
          title: "补充公积金",
          key: "city"
        },
        {
          title: "公积金",
          key: "city"
        },
        {
          title: "残保金",
          key: "city"
        }
      ],
      data4: [
        {
          name: "基数",
          age: "5585",
          address: "2200",
          province: "2200",
          selection: "2200",
          avatar: "--",
          city: "--",
          city: "--",
          city: "--",
          city: "--"
        },
        {
          name: "企业比例",
          age: "5585",
          address: "2200",
          province: "2200",
          selection: "2200",
          avatar: "--",
          city: "--",
          city: "--",
          city: "--",
          city: "--"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped src="./index.scss">
</style>